<template>
  <button class="bbq-button"
          :class="[type,
            { 'round': round === true },
            { 'disable': disable === true }
          ]"
          @click="click">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent } from 'vue'
type bbqType = PropType<'normal' | 'success' | 'warning' | 'danger'>

export default defineComponent({
  //name的作用就是 调用方标签命名的方式
  name: "bbq-button",
  props:{
    //主要按钮类型
    type: {
      type: String as bbqType,
      default: "normal"
    },
    //是否呈幽灵状
    round: Boolean,
    disable: Boolean
  },
  emits:['click'],

  setup(props,context){
    const click =()=>{
      context.emit('click')
    }
    return {
      click
    }
  }
})
</script>